<template>

  <!-- 大盒子 -->
  <div class="song-box">
    <!-- 左边 -->
    <div class="song-l">
      <a class="my" @click="changeplay">我的歌手({{ songlist.length }})</a>
      <a class="my" @click="concealset">
        <i :class="{mys:isdisponone == 1,mys2:isdisponone == 2}"></i>创建的歌单({{ playlists.length }})
      </a>
      <div ref="mydisp1">
        <a
          class="mylist"
          v-for="userplay in playlists"
          :key="userplay.updateTime"
          @click="gomymusic(userplay.id)"
        >
          <div><img :src="userplay.coverImgUrl" alt="" /></div>
          <div class="mymusiclist">
            <span class="span1">{{ userplay.name }}</span>
            <span class="span2">{{ userplay.trackCount }}首</span>
          </div>
          <span class="icon">
            <a></a>
            <a class="icon2"></a>
          </span>
        </a>
      </div>
      <a class="my" @click="concealcollect">
        <i :class="{mys:isdispontow == 1,mys2:isdispontow == 2}"></i>收藏的歌单({{ newplaylists.length }})
      </a>
      <div ref="mydisp2">
        <a
          class="mylist"
          v-for="userplay in newplaylists"
          :key="userplay.updateTime"
          @click="gomymusic(userplay.id)"
        >
          <div><img :src="userplay.coverImgUrl" alt="" /></div>
          <div class="mymusiclist">
            <span class="span1">{{ userplay.name }}</span>
            <span class="span2"
              >{{ userplay.trackCount }}首 by
              {{ userplay.creator.nickname }}</span
            >
          </div>
          <span class="icon">
            <a class="icon2"></a>
          </span>
        </a>
      </div>
    </div>
    <!-- 右边 -->
    <div class="song-r">
      <div v-if="isplaylist == 1">
        <div
          class="songr1"
          v-for="songlists in songlist"
          :key="songlists.picId"
        >
          <span class="songspan1">我的歌手({{ songlist.length }})</span>
          <div class="songimg">
            <img :src="songlists.picUrl" alt="" />
            <div class="songname">
              <a>{{ songlists.name }}</a>
              <span
                >{{ songlists.albumSize }}个专辑
                {{ songlists.mvSize }}个mv</span
              >
            </div>
          </div>
        </div>
      </div>
      <LeftPlayList v-if="isplaylist == 2" />
    </div>
  </div>
</template>

<script>
import LeftPlayList from "@/pages/PlayLists/LeftPlayList";
import { mapState } from "vuex";
export default {
  components: {
    LeftPlayList,
  },
  data() {
    return {
      playlists: [], //自己创建的歌单
      newplaylists: [], //收藏的歌单
      songlist: [], //歌手信息
    };
  },
  mounted() {
    this.getUserPlayList();
    this.getArtistSublist();
  },
  methods: {
    // 获取歌单
    async getUserPlayList() {
      const date = {
        uid: this.userid,
        limit: 30,
        offset: 0,
      };
      const result = await this.$API.reqUserPlayList(date);
      //   console.log(result);
      if (result.code == 200) {
        // 自己的
        let playlists = [];
        // 别人的
        let newplaylists = [];
        // 自己的名字
        result.playlist.forEach((item) => {
          if (item.userId == this.userid) {
            // console.log(item.name,this.username);

            if (item.name.indexOf(this.username) != -1) {
              item.name = "我喜欢的音乐";
              // playlists.push(item);
            }
            playlists.push(item);
            // this.gomymusic(playlists[0].id)
          } else {
            newplaylists.push(item);
          }
        });
        this.playlists = playlists;
        this.newplaylists = newplaylists;
      } else {
        this.$msg.error("获取喜欢列表失败");
      }
    },
    async getArtistSublist() {
      // 获取歌手

      const result = await this.$API.reqArtistSublist({ cookie: this.cookie });
    //   console.log(result);
      if (result.code == 200) {
        this.songlist = result.data;
      } else {
        this.$msg.error("获取歌手失败");
      }
    },

    // 去页面
    gomymusic(id) {
      //   console.log(id);
      this.$store.commit("ISPLAYLIST", 2);
      let date = new Date().getTime();
      this.$router.push(`/mymusic?id=${id}&time=${date}`);
    },
    // 改变
    changeplay() {
      this.$store.commit("ISPLAYLIST", 1);
    },
    concealset() {  
      //1展开 2收起
      if (this.isdisponone == 1) {
        this.$store.commit("ISDISPON", 2);
        this.$refs.mydisp1.style.display = "none";
      }else{
        this.$store.commit("ISDISPON", 1);
        this.$refs.mydisp1.style.display = "block";
      }
    },
    concealcollect() {
        // console.log(this.isdispon);
      if (this.isdispontow == 1) {
        this.$store.commit("ISDISPONTOW", 2);
        this.$refs.mydisp2.style.display = "none";
      }else{
        this.$store.commit("ISDISPONTOW", 1);
        this.$refs.mydisp2.style.display = "block";
      }
    },
  },
  computed: {
    ...mapState({
      //cookie
      cookie: (state) => {
        return state.User.loginmessage.cookie;
      },
      userid: (state) => {
        return state.User.loginmessage.account.id;
      },
      username: (state) => {
        return state.User.loginmessage.profile.nickname;
      },
      isplaylist: (state) => {
        return state.User.isplaylist;
      },
      isdisponone: (state) => {
        return state.User.isdisponone;
      },
      isdispontow: (state) => {
        return state.User.isdispontow;
      },
    }),
  },
  //
};
</script>

<style lang="less" scoped>
a {
  text-decoration: none;
  color: #000;
}
.song-box {
  width: 984px;
  //   height: 1000px;
  min-height: 800px;
  // background-color: aquamarine;
  margin: 0 auto;
  display: flex;
  // 左边
  background-color: rgb(255, 255, 255);

  .song-l {
    width: 254px;
    border: 2px solid rgb(212, 212, 212);
    border-right: none;
    // border: 1px solid rgb(204, 204, 204);
    // background-color: blueviolet;
    .my {
      margin-left: 25px;
      line-height: 40px;
      position: relative;
      display: block;
    }
    .mys {
      width: 0;
      height: 0;
      position: absolute;
      left: -16px;
      top: 16px;
      border-top: 7px solid #cccccc;
      border-bottom: 7px solid white;
      border-left: 7px solid white;
      border-right: 7px solid white;
    }
    .mys2 {
      width: 0;
      height: 0;
      position: absolute;
      left: -16px;
      top: 11px;
      border-top: 7px solid white;
      border-bottom: 7px solid white;
      border-left: 7px solid #cccccc;
      border-right: 7px solid white;
    }
    .mylist {
      display: flex;
      align-items: center;
      height: 40px;
      margin: 18px 0 18px 25px;
      position: relative;
      img {
        width: 40px;
        height: 40px;
      }
      .mymusiclist {
        height: 40px;
        width: 70%;
        margin-left: 10px;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        span {
          display: block;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
        .span2 {
          font-size: 12px;
          color: #666;
        }
      }
    }
    .mylist:hover {
      .icon {
        position: absolute;
        bottom: 7px;
        right: 12px;
        a {
          width: 13px;
          height: 13px;
          display: inline-block;
          margin-right: 5px;
          background: url("~@/assets/image/icon.png") no-repeat 0px -269px;
        }
        .icon2 {
          background: url("~@/assets/image/icon.png") no-repeat 0px -284px;
        }
      }
    }
  }
  //   右边
  .song-r {
    width: 730px;
    border: 2px solid rgb(212, 212, 212);
    // border: 1px solid rgb(204, 204, 204);
    .songr1 {
      width: 660px;
      margin: 20px auto;
      .songspan1 {
        font-size: 26px;
        display: block;
        width: 100%;
        padding-bottom: 10px;
        border-bottom: #c20c0c 2px solid;
      }
      .songimg {
        width: 100%;
        border-bottom: 1px solid rgb(173, 171, 171);
        display: flex;
        margin-top: 10px;
        padding-bottom: 10px;

        img {
          width: 80px;
          height: 80px;
        }
        .songname {
          display: flex;
          flex-direction: column;
          font-size: 12px;
          justify-content: space-around;
          margin-left: 10px;
          a {
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
